<template>
  <div class="app-container">
    <div>
      <el-row :gutter="20">
        <el-col :span="6" :xs="24">
          <UserCard />
        </el-col>
        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <!-- <el-tab-pane label="二次认证" name="auth">
                <UserAuth />
              </el-tab-pane> -->
              <el-tab-pane :label="$t('title.11')" name="info">
                <UserInfo />
              </el-tab-pane>
              <el-tab-pane :label="$t('title.12')" name="psd">
                <UserPassword />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script setup>
import UserCard from '@/components/profile/UserCard.vue';
import UserAuth from '@/components/profile/auth.vue';
import UserInfo from '@/components/profile/userInfo.vue';
import UserPassword from '@/components/profile/password.vue';
// import Activity from './components/Activity';
// import Timeline from './components/Timeline';
// import Account from './components/Account';
const activeTab = ref('info')
</script>